<template>
    <div id="cont">
        <!-- <div class="count">
			<a href="javascript:" @click="add">添加</a>
        </div> -->
			<el-table :data="list">
				<el-table-column prop="sort" label="序号" align="center"></el-table-column>
				<el-table-column prop="title" label="标题" align="center"></el-table-column>
				<el-table-column prop="author.username" label="作者" align="center"></el-table-column>
				<el-table-column prop="date" label="时间" align="center">
					<template #default="scope">
						{{ scope.row.date }}
					</template>
				</el-table-column>
				<el-table-column prop="label.name" label="分类" align="center"></el-table-column>
				<el-table-column label="操作" align="center">
					<template #default="scope">
						<el-button type="text" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
						<el-button type="text" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		<router-view />
    </div>
</template>

<script>
	import app from '@/utils';
	import { articleList, articleDel } from '@/api/article_api';
	
	export default {
		name: 'ArtList',
		data() {
			return {
				name: '',
				list: [],
				formData: {
					page: 1,
					size: 20
				}
			}
		},
		created() {
			this.getList();
		},
		filters: {
			setTime(val) {
				return app.dateTime(val, {format: 'YY-MM-DD'});
			}
		},
		methods: {
			getList() {
				articleList(this.formData).then(response => {
					const res = response.data;
					if(res.s) {
						res.d.list.map((it, i) => {
							it.sort = i+1;
						})
						this.list = res.d.list;
					}
				})
			},
			// 编辑文章
			edit(article) {
				this.$router.push({
					name: 'Write',
					params: article
				})
			},
			// 删除文章
			del(article) {
				articleDel(article).then(response => {
					const res = response.data;
					if(res.s) {
						app.flash('success', '删除成功~');
						this.getList();
					}
				})
			}
		}
	}
</script>

<style>
.tab span {
	word-wrap: none;
	overflow-wrap: normal;
}
	::-webkit-scrollbar {
  width: 0.25rem;
  height: 0.25rem;
  background-image: linear-gradient(135deg, #1DE9B6 0%, rgba(8, 196, 219, 0.5) 72%, rgba(0, 182, 234, 0.3) 100%);
}
::-webkit-scrollbar-track {
  border-radius: 0;
}
::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-image: linear-gradient(135deg, #1DE9B6 0%, #08c4db 72%, #057494 100%);
  transition: all .2s;
  border-radius: 0.25rem;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(95, 95, 95, 0.7);
}
	/* 表单样式 */
	.v-table {
		width: 100%;
		border-spacing: 1px;
	}
	.v-table thead th, .v-table tbody td {
		text-align: center;
	}
	.v-table thead {
		background-color: #10beb6;
	}
	.v-table thead th {
		font-size: 1rem;
		font-weight: 300;
		color: #ffffff;
		line-height: 1.8rem;
	}
	.v-table tbody td {
		font-size: 0.8rem;
	}
	
	.th {padding: 15px 0; }
	.tb {padding: 10px 0; background-color: #f3f7f8;}
	.th>li {font-size: 1.1rem; font-weight: 600;}
	.th>li, .tb>li {float: left;}
	.tb>li {color: #333;}
	.tb:nth-child(odd) {background-color: #e4e9e9;}
	.clearfloat>li:nth-child(1) {width: 10%;}
	.clearfloat>li:nth-child(2) {width: 30%;}
	.clearfloat>li:nth-child(3) {width: 10%;}
	.clearfloat>li:nth-child(4) {width: 20%;}
	.clearfloat>li:nth-child(5) {width: 10%;}
	.clearfloat>li:nth-child(6) {width: 10%;}
</style>
